<template>
    <div class="cart-list-item">
        <check-button @click.native="CheckClick" :isCheck="product.checked"></check-button>
        <div class="img-item">
            <img :src="product.image" />
        </div>
        <div class="other-item-msg">
            <h3 class="title common">{{product.title}}</h3>
            <p class="description common">{{product.desc}}</p>
            <div class="product-price-count">
                <span class="price">￥{{product.price}}</span>
                <span class="count">x{{product.count}}</span>
            </div>
        </div>
    </div>
</template>
<script>
// 引入打勾组件
  import CheckButton from 'components/content/checkbutton/CheckButton'

    export default {
        name:'CartListItem',
        props:{
            product:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        components:{
            CheckButton
        },
        methods: {
            // 问题1 在组件里修改数据 数据是否会动态的传到子集组件里
            // 这点好像不会 动态的传到子集组件里
            // 数据是改了 但是数据传输 只传一次
            CheckClick(){
                console.log('检查是否触发点击');
                this.product.checked = !this.product.checked;
            }
        },
    }
</script>
<style scope>
 .cart-list-item {
    display: flex;
    padding: 10px 5px 10px 0;
    border-top: 1px solid #ccc;
  }

  .other-item-msg {
    flex: 1;
  }
  .img-item {
    width: 68px;
    height: 85px;
  }
  .img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }
  .title {
    font-size: 14px;
    color: #111;
  }
  .common {
     width: 200px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     font-weight: normal;
     padding: 5px;
  }
  .description {
    font-size: 12px;
    color: #666;
  }
  .product-price-count {
    position: relative;
    font-size: 14px;
    top: 15px;
  }
  .price {
    position: absolute;
    left: 5px;
    color: var(--color-tint);
  }
  .count {
    position: absolute;
    right: 5px;
    font-size: 16px;
  }
</style>